
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">角色人员</li>
        <li>角色权限</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show" id="gid_17_table2_content">
            <div class="gid_17_table_title" style="display:none">角色人员</div>
            <div class="gid_17_table_content">
                <div class="layui-card gid_17">
                    <!-- 搜索表单区 -->
                    <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="gid-17-tno-2-sys_role_user-search-form">
                        <div class="layui-form-item">
                            #set(initValue = 'role_id' == filterKey?filterValue:'')
                            #set(disabled = 'role_id'.equals(filterKey))
                            <!-- 下拉表单 -->
                            <div class="layui-inline">
                                <label class="layui-form-label">角色编号</label>
                                <div class="layui-input-inline">
                                    <select id="gid-17-tno-2_role_id_search_select" name="role_id" xm-select-search="" xm-select-radio=""
                                            placeholder="请选择角色编号" autocomplete="off" xm-select-height="36px" xm-select-skin="normal" xm-select="gid-17-tno-2_role_id_search_select" lay-filter="gid-17-tno-2_role_id_search_select">
                                        <option value="">请选择角色编号</option>
                                    </select>
                                </div>
                            </div>
                            #set(initValue = 'user_id' == filterKey?filterValue:'')
                            #set(disabled = 'user_id'.equals(filterKey))
                            <!-- 下拉表单 -->
                            <div class="layui-inline">
                                <label class="layui-form-label">人员编号</label>
                                <div class="layui-input-inline">
                                    <select id="gid-17-tno-2_user_id_search_select" name="user_id" xm-select-search="" xm-select-radio=""
                                            placeholder="请选择人员编号" autocomplete="off" xm-select-height="36px" xm-select-skin="normal" xm-select="gid-17-tno-2_user_id_search_select" lay-filter="gid-17-tno-2_user_id_search_select">
                                        <option value="">请选择人员编号</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" lay-submit lay-filter="gid-17-tno-2-btn-sys_role_user-form-search">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                    <!-- 列表区 -->
                    <div class="layui-card-body">

                        <!-- 头部工具栏模板 -->
                        <script type="text/html" id="sys_role_user_header_toolbar">
                            <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-sm" lay-event="add">添加人员</button>
                                <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="dels">删除人员</button>
                            </div>
                        </script>

                        <!-- 列表表格 -->
                        <table id="gid-17-tno-2-sys_role_user-table" lay-filter="gid-17-tno-2-sys_role_user-table" style="width: 100%"></table>

                        <!-- 每行操作按钮模板 -->
                        <script type="text/html" id="gid-17-tno-2-sys_role_user_row_toolbar">
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete table_btn_icon"></i></a>
                        </script>
                    </div>
                </div>
            </div>
            <!-- JS脚本区 -->
            <script>
                layui.use(['table', 'form', 'layer', 'laydate', 'jquery', 'admin', 'xSelects'], function () {
                    var form = layui.form, layer = layui.layer, laydate = layui.laydate, table = layui.table, admin = layui.admin, xSelects = layui.xSelects;

                    form.render(null, 'gid-17-tno-2-sys_role_user-search-form');
                    var initValue = '#('role_id' == filterKey?filterValue:'')';
                    #set(disabled = 'role_id'.equals(filterKey))
                    //渲染角色编号下拉分页选择器
                    xSelects.render({
                        selectId: 'gid-17-tno-2_role_id_search_select',
                        url: '/system/role/table2/role_id/sys_role/list',
                        titleKey: 'role_name',
                        valueKey: 'role_id',
                        searchKey: 'role_name__op__like',
                        showPage: true,
                        size: 10,
                        multiSelect: false,
                        model: { type: 'fixed' },
                        disabled: #(disabled),
                        init: initValue!=''?[{val:initValue}]:[],
                        // 初始值设置
                        initValues: initValue!=''?[initValue]:[]
                    });
                    var initValue = '#('user_id' == filterKey?filterValue:'')';
                    #set(disabled = 'user_id'.equals(filterKey))
                    //渲染人员编号下拉分页选择器
                    xSelects.render({
                        selectId: 'gid-17-tno-2_user_id_search_select',
                        url: '/system/role/table2/user_id/sys_user/list',
                        titleKey: 'user_name',
                        valueKey: 'user_id',
                        searchKey: 'user_name__op__like',
                        showPage: true,
                        size: 10,
                        multiSelect: false,
                        model: { type: 'fixed' },
                        disabled: #(disabled),
                        init: initValue!=''?[{val:initValue}]:[],
                        // 初始值设置
                        initValues: initValue!=''?[initValue]:[]
                    });
                    // 表单搜索监听
                    form.on('submit(gid-17-tno-2-btn-sys_role_user-form-search)', function (data) {
                        console.log('gid-17-tno-2-sys_role_user-search-form', data)
                        var field = data.field;
                        #if(notBlank(filterKey))
                        field = { ...field, '#(filterKey)': '#(filterValue)' }
                        #end
                        //执行重载
                        table.reload('gid-17-tno-2-sys_role_user-table', {
                            where: field,
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        return false;
                    });
                    // 渲染表格数据
                    var tableIns = table.render({
                        id: 'gid-17-tno-2-sys_role_user-table',
                        elem: '#gid-17-tno-2-sys_role_user-table',
                        // 树表格专用参数
                        tree: {
                            iconIndex: 1,
                            isPidData: true,
                            idName: 'ru_id',
                            pidName: '',
                            arrowType: 'arrow2',
                            onlyIconControl: true,
                        },
                        toolbar: '#sys_role_user_header_toolbar',
                        url: '/system/role/table2/list',
                    #if(notBlank(filterKey))
                    where: { #(filterKey): "#(filterValue)" },
                    #end
                    loading: true,
                        page: true, //开启分页
                        cols: [[
                        {type: 'checkbox', fixed: 'left'},
                        {field: 'user_id', title: '人员编号', templet: function (row){
                                if(row.user_id_title){
                                    return row.user_id_title;
                                }
                                return '--';
                            }},
                        {field: 'role_id', title: '角色编号', templet: function (row){
                                if(row.role_id_title){
                                    return row.role_id_title;
                                }
                                return '--';
                            }},
                        {title: '操作', width: '', fixed: 'right', templet: '#gid-17-tno-2-sys_role_user_row_toolbar'}
                    ]],
                        done: function (a,b,c) {
                        console.log('tableIns', tableIns);
                        tableIns.expandAll&&tableIns.expandAll()
                    }
                });

                    table['gid-17-tno-2-sys_role_user-table'] = tableIns;

                    // 监听表格工具栏事件
                    table.on("toolbar(gid-17-tno-2-sys_role_user-table)", eventListener)

                    // 监听表格行事件
                    table.on("tool(gid-17-tno-2-sys_role_user-table)", eventListener)

                    ;
                    // 事件监听
                    function eventListener(obj) {
                        let event = obj.event;
                        let data = obj.data;
                        var postData = {};
                        #if(notBlank(filterKey))
                        postData.filterKey = '#(filterKey)';
                        postData.filterValue = '#(filterValue)';
                        #end
                        switch (event) {
                            case 'addSub':
                                postData.filterKey = '';
                                postData.filterValue = data.ru_id;
                            case 'add':
                                layui.$.post('/system/role/table2/editPage', postData, function (str) {
                                    layer.open({
                                        type: 1,
                                        title: '新建角色人员',
                                        maxmin: true,
                                        area: ['600px', '400px'],
                                        content: str,
                                    })
                                });
                                break;
                            case 'edit':
                                postData.ru_id = data.ru_id;
                                layui.$.post('/system/role/table2/editPage', postData, function (str) {
                                    layer.open({
                                        type: 1,
                                        title: '编辑角色人员',
                                        maxmin: true,
                                        area: ['600px', '400px'],
                                        content: str,
                                    })
                                });
                                break;
                            case 'dels':
                                let checkStatus = table.checkStatus('gid-17-tno-2-sys_role_user-table');
                                let selectRow = checkStatus.data;
                                deleteRow(selectRow);
                                break;
                            case 'del':
                                let row = obj.data;
                                deleteRow([row]);
                                break;
                        }
                        console.log('toolbar_event', obj)
                    }

                    // 删除行方法
                    function deleteRow(selectRows) {
                        if (selectRows.length <= 0) {
                            layer.msg('请先钩选要删除的记录行！');
                            return;
                        }
                        layer.confirm('确定要删除这' + selectRows.length + '条记录吗？',
                            {icon: 3, title: '提示', btn: ['确认删除', '取消']},
                            function (index) {
                                console.log(index);
                                layui.$.ajax({
                                    url: '/system/role/table2/delete',
                                    data: {
                                        ids: selectRows.map((row) => row.ru_id)
                                    },
                                    traditional: true,
                                    type: 'POST',
                                    success: function (result) {
                                        if (result.success) {
                                            layer.msg('删除成功', {icon: 6});
                                            table.reload('gid-17-tno-2-sys_role_user-table');
                                        } else {
                                            layer.msg('删除失败！' + result.message, {icon: 5});
                                        }
                                    }
                                });
                            });
                    }
                })
            </script>
        </div>
        <div class="layui-tab-item" id="gid_17_table3_content">
            <div class="gid_17_table_title" style="display:none">角色权限</div>
            <div class="gid_17_table_content">
                <div class="layui-card gid_17">
                    <!-- 列表区 -->
                    <div class="layui-card-body">

                        <!-- 头部工具栏模板 -->
                        <script type="text/html" id="sys_role_oper_header_toolbar">
                            <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-sm" lay-event="save">保存修改</button>
                            </div>
                        </script>

                        <!-- 列表表格 -->
                        <table id="gid-17-tno-3-sys_role_oper-table" lay-filter="gid-17-tno-3-sys_role_oper-table" style="width: 100%"></table>

                        <!-- 每行操作按钮模板 -->
                        <script type="text/html" id="gid-17-tno-3-sys_role_oper_row_toolbar">
                            <a class="layui-btn layui-btn-default layui-btn-xs" lay-event="addSub" title="添加子节点"><i class="layui-icon layui-icon-add-1 table_btn_icon"></i></a>
                            <a class="layui-btn layui-btn-default layui-btn-xs" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit table_btn_icon"></i></a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete table_btn_icon"></i></a>
                        </script>
                    </div>
                </div>
            </div>
            <!-- JS脚本区 -->
            <script>
                layui.use(['treeTable', 'form', 'layer', 'laydate', 'jquery', 'admin', 'xSelects'], function () {
                    var form = layui.form, layer = layui.layer, laydate = layui.laydate, table = layui.treeTable, admin = layui.admin, xSelects = layui.xSelects;
                    // 渲染表格数据
                    var tableIns = table.render({
                        id: 'gid-17-tno-3-sys_role_oper-table',
                        elem: '#gid-17-tno-3-sys_role_oper-table',
                        // 树表格专用参数
                        tree: {
                            iconIndex: #(notBlank(filterKey)?'1':'0'),
                            isPidData: true,
                            idName: 'oper_id',
                            pidName: 'oper_pid',
                            arrowType: 'arrow2',
                            strict: false,
                            onlyIconControl: true,
                        },
                        #if(notBlank(filterKey))
                        toolbar: '#sys_role_oper_header_toolbar',
                        #end
                        url: '/system/oper/list?limit=1000',
                        loading: true,
                        page: true, //开启分页
                        cols: [[
                            #if(notBlank(filterKey))
                            {type: 'checkbox', fixed: 'left'},
                            #end
                            {field: 'oper_name', title: '操作权限'},
                            {field: 'oper_type', title: '操作类型',templet: function(d){
                                    switch(d.oper_type){
                                        case 0: return '菜单'
                                        case 1: return '权限'
                                    }
                                }},
                            {field: 'permission_key', title: '权限标识'},
                        ]],
                        done: function (a,b,c) {
                            console.log('tableIns', tableIns);
                            tableIns.expandAll&&tableIns.expandAll()
                            #if(notBlank(filterKey))
                            //选中表格
                            checkTreeTable(tableIns)
                            #end
                        }
                    });

                    table['gid-17-tno-3-sys_role_oper-table'] = tableIns;
                    #if(notBlank(filterKey))
                    function checkTreeTable(tableIns){
                        $.ajax({
                            url:'/system/role/table3/list',
                            data: {
                                limit: 1000,
                                #(filterKey): "#(filterValue)",
                            },
                            traditional: true,
                            type: 'POST',
                            success: function (result) {
                                if (result.success) {
                                    let checkedData = [];
                                    result.data.forEach(function(item){
                                        console.log(item)
                                        checkedData.push(item.oper_id);
                                    })
                                    console.log(checkedData)
                                    tableIns.setChecked(checkedData)
                                } else {
                                    layer.msg('初始化表格选中失败！' + result.message, {icon: 5});
                                }
                            }
                    })
                }
                #end
                // 监听表格工具栏事件
                table.on("toolbar(gid-17-tno-3-sys_role_oper-table)", eventListener)

                // 监听表格行事件
                table.on("tool(gid-17-tno-3-sys_role_oper-table)", eventListener)

                ;
                // 事件监听
                function eventListener(obj) {
                    let event = obj.event;
                    let data = obj.data;
                    var postData = {};
                    #if(notBlank(filterKey))
                    postData.filterKey = '#(filterKey)';
                    postData.filterValue = '#(filterValue)';
                    #end
                    switch (event) {
                        case 'addSub':
                            postData.filterKey = '';
                            postData.filterValue = data.ro_id;
                        case 'add':
                            layui.$.post('/system/role/table3/editPage', postData, function (str) {
                                layer.open({
                                    type: 1,
                                    title: '新建角色权限',
                                    maxmin: true,
                                    area: ['600px', '400px'],
                                    content: str,
                                })
                            });
                            break;
                        case 'save':
                            let checks = tableIns.checkStatus();
                            let operIds = [];
                            checks.forEach(function(item){operIds.push(item.oper_id)});
                            let saveData = {roleId: '#(filterValue)', operId: operIds};
                            layui.$.ajax({
                                url: '/system/role/table3/saveOpers',
                                data: saveData,
                                traditional: true,
                                type: 'POST',
                                success: function (result) {
                                    if (result.success) {
                                        layer.msg('保存成功', {icon: 6});
                                        // table.reload('gid-17-tno-3-sys_role_oper-table');
                                    } else {
                                        layer.msg('保存失败！' + (result.message?result.message:''), {icon: 5});
                                    }
                                },
                                error: function(d){
                                    console.log(d)
                                    layer.msg('保存错误！' + d, {icon: 5});
                                }

                            })
                            break;
                        case 'edit':
                            postData.ro_id = data.ro_id;
                            layui.$.post('/system/role/table3/editPage', postData, function (str) {
                                layer.open({
                                    type: 1,
                                    title: '编辑角色权限',
                                    maxmin: true,
                                    area: ['600px', '400px'],
                                    content: str,
                                })
                            });
                            break;
                        case 'dels':
                            let checkStatus = table.checkStatus('gid-17-tno-3-sys_role_oper-table');
                            let selectRow = checkStatus.data;
                            deleteRow(selectRow);
                            break;
                        case 'del':
                            let row = obj.data;
                            deleteRow([row]);
                            break;
                    }
                    console.log('toolbar_event', obj)
                }

                // 删除行方法
                function deleteRow(selectRows) {
                    if (selectRows.length <= 0) {
                        layer.msg('请先钩选要删除的记录行！');
                        return;
                    }
                    layer.confirm('确定要删除这' + selectRows.length + '条记录吗？',
                        {icon: 3, title: '提示', btn: ['确认删除', '取消']},
                        function (index) {
                            console.log(index);
                            layui.$.ajax({
                                url: '/system/role/table3/delete',
                                data: {
                                    ids: selectRows.map((row) => row.ro_id)
                                },
                                traditional: true,
                                type: 'POST',
                                success: function (result) {
                                    if (result.success) {
                                        layer.msg('删除成功', {icon: 6});
                                        table.reload('gid-17-tno-3-sys_role_oper-table');
                                    } else {
                                        layer.msg('删除失败！' + result.message, {icon: 5});
                                    }
                                }
                            });
                        });
                }
                })
            </script>
        </div>
    </div>
</div>